<template>
    <div class="bg-song-card">
        <div class="audio-player ready" @click="handleClickSong">
            <i :class="{ 'audio-player-icon': true, play: isPlay }">
                <svg width="24" height="18" xmlns="http://www.w3.org/2000/svg">
                    <g
                        stroke="white"
                        stroke-width="1.75"
                        fill="none"
                        fill-rule="evenodd"
                        stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M5 10v9M10 4v15M15 13v6M20 7v12" />
                    </g>
                </svg>
            </i>
            <span class="audio-player-name">{{ playInfo?.name }} - {{ playInfo?.author[0].name }}</span>
            <audio
                ref="audioRef"
                style="display: none"
                :src="playInfo?.url"
                autoplay="true"
                loop="true"
                volume="0.4"
                @playing="handlePlayingSong"></audio>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { api_get_song } from "@/api/api_everyday";
    import { ref, watch } from "vue";
    import type { Song } from "@/model/song";

    const playInfo = ref<Song>();

    async function getSongInfo() {
        const { data } = await api_get_song();
        playInfo.value = data;
    }

    getSongInfo();
    const isPlay = ref(false);
    const audioRef = ref<HTMLAudioElement>();

    // watch(() => audioRef, () => {
    //   const timeRanges = audioRef.value?.played
    //   if(timeRanges && timeRanges?.length > 0) {
    //     console.log('开始播放')
    //   }
    // })
    // if(audioRef.value) audioRef.value.volume = 0.1

    const handleClickSong = () => {
        if (!isPlay.value) {
            audioRef.value?.play().then(res => {
                isPlay.value = true;
            });
        } else {
            audioRef.value?.pause();
            isPlay.value = false;
        }
    };

    const handlePlayingSong = () => {
        isPlay.value = true;
    };
</script>

<style scoped>
    .bg-song-card {
        margin: 2px 0;
        padding: 0 0 2px 2px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        backdrop-filter: blur(10px);
        background-color: #eee5;
    }

    /*.bg-song-card::before {*/
    /*  content: '';*/
    /*}*/
    .audio-player {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: white;
    }

    .audio-player-icon {
        margin-right: 4px;
    }

    .play {
        animation: playing 1s linear infinite;
    }

    .audio-player-name {
        align-self: flex-end;
        cursor: pointer;
    }

    @keyframes playing {
        0% {
            transform: rotateY(0deg);
        }

        49% {
            transform: rotateY(0deg);
        }
        50% {
            transform: rotateY(180deg);
        }
        99% {
            transform: rotateY(180deg);
        }
    }
</style>
